<script setup lang="ts">
import { deleteArticleItemApi, getArticleListApi, } from '@/apis/article';
import GeekChannel from '@/components/GeekChannel.vue';
import router from '@/router';
import type { ArticleData, ArticleItem, } from '@/types/article';
import { ArrowRight, Delete, Edit } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref, watch } from 'vue';

// 查询参数
const articleParams = ref<ArticleData>({
  status: undefined,
  begin_pubdate: null,
  end_pubdate: null,
  channel_id: undefined,
  page: 1,
  per_page: 2
})



// 日期处理
// 初始化日期选择数组
const dateRes = ref<string[]>([])

// 监视日期选择数组的变化
watch(dateRes, (newValue) => {
  // 当选择的日期为空时，重置文章参数的开始和结束发布日期
  if (newValue === null) {
    articleParams.value.begin_pubdate = null
    articleParams.value.end_pubdate = null
  } else {
    // 否则，根据新的日期选择更新文章参数的开始和结束发布日期
    articleParams.value.begin_pubdate = newValue[0]
    articleParams.value.end_pubdate = newValue[1]
  }
}, { deep: true })

// 分页
const total = ref<number>(0)

// 处理当前页码变化
/**
 * 处理当前页码改变的函数
 * @param {number} currentPage 当前选择的页码
 * 此函数解释了当用户选择不同的页码时，如何更新文章参数中的页码值，并重新获取文章列表
 * 通过这种方式，用户可以浏览不同页码的文章列表
 */
const handleCurrentChange = (currentPage: number) => {
  // 更新文章参数中的当前页码
  articleParams.value.page = currentPage;
  // 根据新的页码重新获取文章列表
  getArticleList();
}

// 处理每页显示条数变化
/**
 * 处理每页条数变化的函数
 * 当用户更改每页显示的条数时，此函数会被调用
 * 它主要负责更新分页参数，并重新获取文章列表数据
 *
 * @param {number} pageSize - 用户选择的每页显示的条数
 */
const handleSizeChange = (pageSize: number) => {
  // 切换每页条数时重置到第一页
  articleParams.value.page = 1;
  // 更新每页显示的条数
  articleParams.value.per_page = pageSize;
  // 重新获取文章列表数据
  getArticleList();
}

// 获取文章列表
// 定义一个响应式的数组，用于存储文章列表
const articleList = ref<ArticleItem[]>([])

/**
 * 异步获取文章列表
 * 此函数调用后端API获取文章数据，并更新文章列表和总数
 */
const getArticleList = async () => {
  // 调用后端API获取文章数据
  const res = await getArticleListApi(articleParams.value)
  // 更新文章列表
  articleList.value = res.data.results
  // 更新文章总数
  total.value = res.data.total_count
}

// 编辑文章
/**
 * 编辑文章函数
 *
 * 此函数接收一个字符串类型的id作为参数，旨在导航到文章发布页面，
 * 以便用户可以编辑指定的文章该函数利用Vue Router，
 * 通过push方法导航到名为'publish'的路由，并传递文章的id作为路由参数
 *
 * @param {string} id - 文章的唯一标识符，用于指定需要编辑的文章
 */
const editArticle = (id: string) => {
  router.push({
    name: 'publish',
    params: { id }
  })
}
// 删除文章
const deleteArticleItem = (id: string) => {
  ElMessageBox.confirm(
    '此操作将永久删除文章, 是否继续?',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      await deleteArticleItemApi(id)
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
      getArticleList()
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}

onMounted(() => {
  getArticleList()
})
</script>

<template>
  <el-card class="box-card">
    <!-- 这里是自定义插槽的头部区域。使用 v-slot:header 指令，我们可以向组件的特定部分插入自定义内容。此处的模板用于定义在组件头部显示的结构和样式。 -->
    <template v-slot:header>
      <div>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </template>
    <!-- 主体是表单组件 -->
    <el-form label-width="80px">
      <el-form-item label="状态：">
        <el-radio-group v-model="articleParams.status">
          <el-radio :label="undefined">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核失败</el-radio>
          <el-radio :label="4">已删除</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 频道 -->
      <el-form-item label="频道：">
        <!-- el-select 下拉选择器  clearable 可清空 -->
        <!-- 频道组件(全局组件) -->
        <GeekChannel v-model="articleParams.channel_id"></GeekChannel>
      </el-form-item>

      <!-- 日期选择器 -->
      <el-form-item label="日期：">
        <!-- 日期选择器  type="daterange" 范围选择 -->
        <el-col :span="11">
          <el-date-picker v-model="dateRes" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        </el-col>
      </el-form-item>

      <!-- 筛选 -->
      <el-form-item>
        <el-button type="primary" @click="getArticleList">筛选</el-button> {{ articleParams }}
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 结果区域 -->
  <el-card shadow="always" style="margin-top: 20px;">
    <div class="header">
      <p>根据筛选条件共查询到 {{ total }} 条结果：</p>
    </div>

    <!-- 表格 -->
    <el-table :data="articleList" style="margin: 20px 0;">
      <el-table-column label="封面">
        <template v-slot="scope">
          <el-image :src="scope.row.cover.images[0]" :preview-src-list="scope.row.cover.images"
            style="width: 100px; height: 100px" fit="cover">
            <div class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>

      <el-table-column label="标题" prop="title"></el-table-column>

      <el-table-column label="状态" prop="status">
        <template v-slot="scope">
          <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
          <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="danger">审核失败</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="发布时间" prop="pubdate"></el-table-column>

      <el-table-column label="阅读数" prop="read_count"></el-table-column>

      <el-table-column label="评论数" prop="comment_count"></el-table-column>

      <el-table-column label="点赞数" prop="like_count"></el-table-column>

      <el-table-column label="操作" width="120px">
        <template v-slot="scope">
          <el-button type="primary" :icon="Edit" circle @click="editArticle(scope.row.id)" />
          <el-button type="danger" :icon="Delete" circle @click="deleteArticleItem(scope.row.id)" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件，layout 分页布局，子组件名用逗号分隔，其他属性鼠标悬停看效果 -->
    <el-pagination v-model="articleParams.page" style="margin-top: 20px;" :total="total" :page-sizes="[2, 5, 10, 20]"
      v-model:page-size="articleParams.per_page" @current-change="handleCurrentChange" @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper" />

  </el-card>
</template>

<style scoped>
/*  在这里编写组件的样式 */
</style>
